<template>
<div v-cloak class="app-container"> 
  <!--根组件结构  -->
  <!-- 顶部header区 -->
  <mt-header fixed title="小试牛刀"></mt-header>

  <!-- 中部 路由组件切换区 router-view -->
  <transition>
		<router-view></router-view>
	</transition>
  <!-- 底部路由控制区 router-link -Tabber -->
  <nav class="mui-bar mui-bar-tab">
			<router-link class="mui-tab-item " to="/home">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</router-link>
			<router-link class="mui-tab-item" to="/message">
				<span class="mui-icon mui-icon-email"><span class="mui-badge">2</span></span>
				<span class="mui-tab-label">消息</span>
			</router-link>
			<router-link class="mui-tab-item" to="/shopcar">
        <!-- 用mui扩展图标库中的购物车图标替换掉原来的通讯录图标 -->
				<!-- <span class="mui-icon mui-icon-contact"></span> -->
				<span class="mui-icon mui-icon-extra mui-icon-extra-cart"><span class="mui-badge">9</span></span>
				<span class="mui-tab-label">购物车</span>
			</router-link>
			<router-link class="mui-tab-item" to="/search">
				<span class="mui-icon mui-icon-search"></span>
				<span class="mui-tab-label">搜索</span>
			</router-link>
			<router-link class="mui-tab-item" to="/setting">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">设置</span>
			</router-link>
		</nav>
</div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
  [v-colak]{
    display: none;
  }
  .app-container{
		/*最开始没有给根组件的最外层定义class，直接用body进行选择，
		在做到home组件轮播图时，和header之间产生空格，关闭padding，轮播图和header重叠，在header后。
		因此根组件的最外层要定义class，便于精确选择，不要用body。*/
    padding-top: 40px;
		padding-bottom: 50px;
		height: 100%;/*根组件定义height为100%，实现全屏容器*?
		overflow-x: hidden;/*隐藏x方向的滚动条，避免切换的时候出现x方向的滚动条*/
		
  }
	.mint-header{
		z-index: 99px;//这是顶部标题栏，设个大一点的z-index，保证不会被挡住。
	}
	.mui-icon-email .mui-badge{
		background: green;
	} 
	//添加组件切换过度效果，要从右进入，从左离开，不然就会打架。
	.v-enter{/*过度的两个类进入v-enter和离开 v-leave*/
		opacity: 0;
		transform: translateX(100%);/*进入移动方向，沿着x轴移动整个宽度，从右侧进入*/
		
	}
	.v-leave-to{
		opacity: 0;
		transform: translateX(-100%);/*移动方向，沿着x轴移动整个宽度，从左侧离开*/
		position: absolute;/*离开时要定义离开的位置是absolute，不然，进入会从下往上不平滑*/
	}
	.v-enter-active,.v-leave-active{
		transition: all .3s ease;/*动画时间0.5秒，容易模式*/
	}
</style>